<div id="pieContainer" style="min-width:300px;height:350px"></div>
<div id="linearContainer" style="min-width:300px;height:350px;margin-top: 20px"></div>
<script>

    layui.use(['admin', 'paperCommon'], function () {
        let admin = layui.admin;
        let layer = layui.layer;
        let paperCommon = layui.paperCommon;

        let paper = admin.getTempData('t_paperScoreCount');
        let currentTime = paperCommon.getNowFormatDate();

        let pieData = null;
        let linearData = null;
        let avgData = null;

        layer.load(2);
        admin.req('api-paper/paper/getPaperPieData/' + paper.id, {}, function (result) {
            layer.closeAll('loading');
            pieData = result.data;
        }, 'GET');

        admin.req('api-paper/paper/getPaperLinearData/' + paper.id, {}, function (result) {
            avgData=result.data;
            linearData = getLinearData(result.data);
        }, 'GET');

        //饼状图
        const options = {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: paper.title + '评分饼状图'
            },
            subtitle: {
                text: '综合评分: ' + avgScore(avgData) + '分'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                name: '评分',
                colorByPoint: true,
                data: pieData
            }],
            credits: {
                enabled: false // 禁用版权信息
            }
        };
        Highcharts.chart('pieContainer', options);

        //条形图
        const linearOptions = {
            chart: {
                type: 'column'
            },
            title: {
                text: paper.title + '评分条形图'
            },
            subtitle: {
                text: '数据截止 ' + currentTime + '，来源: <a href="javascript:;">调查问卷</a>'
            },
            xAxis: {
                type: 'category',
                labels: {
                    rotation: -45  // 设置轴标签旋转角度
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: '人口 (个)'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                pointFormat: '人数: <b>{point.y:.1f} 人</b>'
            },
            series: [{
                name: '总人数',
                data: linearData,
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    format: '{point.y:.1f}', // :.1f 为保留 1 位小数
                    y: 10
                }
            }],
            credits: {
                enabled: false // 禁用版权信息
            }
        };
        Highcharts.chart('linearContainer', linearOptions);

        /**
         * 条形图数据
         * @param data
         */
        function getLinearData(data) {
            let linear = [];
            for (let i = 0; i < data.length; i++) {
                let k = [];
                k.push(data[i].psrate, data[i].pcount);
                linear.push(k)
            }
            return linear;
        }

        /**
         * 综合评分
         * @param data
         */
        function avgScore(data) {
            let avgScore = '';
            for (let i = 0; i < data.length; i++) {
                avgScore = data[i].avgscr;
            }
            if (avgScore){
                avgScore = avgScore.toFixed(2) * 100;
            }
            return avgScore;
        }
    });
</script>